<template>
  <div class="news-list" v-if="formattedMovieRelatedNews.length > 0">
    <header class="title">
      <span>相关快讯</span>
      <span>全部 <van-icon name="arrow" /></span>
    </header>

    <ul>
      <li class="content" v-for="(news, index) in formattedMovieRelatedNews" :key="index">
        <div class="left">
          <div class="title">
            {{ news.title }}
          </div>
          <div class="author-date">
            <span class="author">{{ news.source }}</span>
            <span class="date">{{ timestampToDate(news.created) }}</span>
          </div>
        </div>
        <div class="right">
          <img :src="news.previewImages[0].url" :alt="news.title">
          <div class="view-reply">
            <span class="view"><van-icon name="eye-o" /> {{ news.viewCount }}</span>
            <span class="reply"><van-icon name="comment-o" /> {{ news.commentCount }}</span>
          </div>
        </div>
      </li>


    </ul>
  </div>
</template>
<script setup>
import { timestampToDate } from "@/tools/index.js"
import { updateMovieRelatedNewsImageUrl } from "@/tools/index.js"
import { computed } from "vue";
const props = defineProps({
  movieRelatedNews: {
    type: Array,
  }
});

const formattedMovieRelatedNews = computed(() => {
  return props.movieRelatedNews.map(news => {
    if (news.previewImages && news.previewImages.length > 0) {
      news.previewImages[0].url = updateMovieRelatedNewsImageUrl(news.previewImages[0].url);
    }
    return news;
  });
});



</script>
<style scoped>
.news-list {
  margin-top: 10px;
  background-color: #fff;
  padding: 0 10px;
}

.news-list header.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  color: #333;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.news-list header.title span:last-child {
  font-size: 12px;
  color: #999;
}

.content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.content:last-child {
  border-bottom: none;
}

.content .title {
  height: 78px;
}

.left {
  margin-right: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.left .title {
  font-size: 17px;
  color: #333;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  width: 100%;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  margin-bottom: 10px;
}

.right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

.right img {
  width: 110px;
  height: 78px;
  object-fit: cover;
  margin-bottom: 10px;
}

.author-date,
.view-reply {
  font-size: 12px;
  color: #999;
  width: 100%;
}

.date {
  margin-left: 5px;
}

.reply {
  float: right;
}
</style>
